<template>
  <div class="search-top-box">
    <div class="left-box">
      <p-row :gutter="16">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">法人编号</span>
            <div class="item-right">
              <p-input v-model="form.legalNo" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">法人名称</span>
            <div class="item-right">
              <p-input v-model="form.legalName" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户名称</span>
            <div class="item-right">
              <p-input
                v-model="form.customerName"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-fiag">付款条件和账期</span>
            <div class="item-right">
              <p-input
                v-model="form.settlementPeriod"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
      </p-row>
    </div>
    <div class="right-box">
      <p-button
        class="commonbutton space"
        type="primary"
        @click="searchTableList"
      >
        搜索
      </p-button>
      <p-button class="commonbutton space" @click="resForm">重置</p-button>
      <p-button class="commonbutton space" @click="exportExcel">
        导出
      </p-button>
    </div>
  </div>
</template>

<script>
import { postInserExport } from '@/api/customerApi.js';

import { downloadFile } from '@/utils/index.js';

const defaultForm = {
  legalNo: '', // 法人编号
  legalName: '', // 法人名称
  customerName: '', // 客户名称
  settlementPeriod: '', // 付款条件和账期
  column: '',
};
const all = { label: '全部', value: '' };
export default {
  components: {},
  data() {
    return {
      form: {
        legalNo: '', // 法人编号
        legalName: '', // 法人名称
        customerName: '', // 客户名称
        settlementPeriod: '', // 付款条件和账期
        column: '',
      },
      orgGroupOptions: [],
      classification: [], // 客户分类数据
      currStatusOptions: [],
      nodeCodeOptions: [],
    };
  },
  computed: {
    getSearchParams() {
      return {
        ...this.form,
      };
    },
  },
  watch: {},
  created() {},

  methods: {
    async searchTableList() {
      this.$emit('search');
    },
    resForm() {
      this.form = { ...defaultForm };
      this.$emit('search', true);
    },
    async exportExcel() {
      const data = JSON.parse(JSON.stringify(this.form));
      const list = {
        legalNo: data.legalNo || null, // 法人编号
        legalName: data.legalName || null, // 法人名称
        customerName: data.customerName || null, // 客户名称
        settlementPeriod: data.settlementPeriod || null, // 付款条件和账期
      }
      const res = await postInserExport(list);
      await downloadFile(res.data, res.filename || '法人信息明细.xls');
    },
  },
};
</script>

<style lang="less" scope>
.right-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  .space {
    margin-right: 5px;
  }
}
.search-top-box {
  display: flex;
  padding: 15px 0 10px 0;
  align-items: center;
  width: 100%;
  background: #f7f7f8;
  border: 1px solid #e5e6e9;
  margin-bottom: 20px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        width: 70px;
        padding-right: 8px;
        text-align: end;
      }
      .item-fiag {
        padding-right: 8px;
        text-align: end;
      }
      .item-right {
        flex: 4;
      }
    }
  }
}
</style>
